<template>
    <div>
        <!-- 这里是页面的主要内容 -->
        <h1>{{ title }}</h1>
        <el-button @click="handleSendMessage('Hello from Vue 3!')">发送消息</el-button>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useSocket } from '@/utils/web-socket-util.js'; // 导入自定义的 socket 管理函数

const { onMessage, sendMessage } = useSocket(); // 初始化 socket 连接

onMounted(() => {
    onMessage((message) => {
        // 处理接收到的消息
        console.log('Received message:', message);
    });
});

const  handleSendMessage = (message) => {
    sendMessage(message); // 发送消息 
}

// 定义响应式数据
const title = ref('Vue 3 模板');
</script>

<style lang="scss" scoped>
/* 这里可以添加样式 */
h1 {
    color: blue;
}
</style>
